<template>
  <div class="playBar">
    <div class="operation">
      <i class="el-icon-user-solid" @click="loginDialogVisible = true" />
      <i class="el-icon-caret-left" @click="playNext(-1)" />
      <i class="el-icon-video-pause" />
      <i class="el-icon-caret-right" @click="playNext(+1)" />
    </div>
    <el-dialog :visible.sync="loginDialogVisible" width="30%">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="登录" name="login">
          <el-form :model="loginForm">
            <el-form-item>
              <el-input
                v-model="loginForm.username"
                placeholder="请输入用户名"
                type="text"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="loginForm.password"
                placeholder="请输入密码"
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="login">登录</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="注册" name="second">
          <el-form :model="registerForm">
            <el-form-item>
              <el-input
                v-model="registerForm.username"
                placeholder="请输入用户名"
                type="text"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="registerForm.password"
                placeholder="请输入密码"
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="registerForm.email"
                placeholder="请输入邮箱"
                type="email"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="register">注册</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <APlayer :audio="audio" :lrcType="3" class="slider-block" />

    <div class="operation">
      <i class="el-icon-success" />
      <i class="el-icon-download" />
      <i class="el-icon-s-operation" @click="openDrawer" />
    </div>

    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
      <h3>评论</h3>
      <div class="comment" v-for="comment in commentList" :key="comment.id">
        <div class="avatar">
          <el-avatar
            src="http://localhost:8888/upload-images/666.jpg"
          ></el-avatar>
        </div>
        <h4>{{ comment.user.username }}</h4>
        <h4>{{ comment.content }}</h4>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  created() {
    this.getSongs();
  },
  data() {
    return {
      loginForm: {
        username: "a",
        password: "123"
      },
      registerForm: {
        username: "",
        password: "",
        email: ""
      },
      activeName: "login",
      loginDialogVisible: false,
      commentList: [],
      drawer: false,
      songId: 3,
      audio: {
        name: "东西（Cover：林俊呈）",
        artist: "纳豆",
        url: "http://localhost:8888/upload-images/test.mp3",
        cover: "http://localhost:8888/upload-images/666.jpg"
      }
    };
  },
  methods: {
    login() {
      this.$http.post("user/login", this.loginForm).then(response => {
        console.log(response.data);
        this.$store.state.user = response.data.data;
        console.log(this.$store.state.user);
        this.$message.success("登录成功");
        this.loginDialogVisible = false;
      });
    },
    register() {
      this.$http
        .post("user/register", this.registerForm)
        .then(response => {
          console.log(response);
          this.$message.success("注册成功");
          this.loginDialogVisible = false;
        })
        .catch(reason => {
          console.log(reason);
          this.$message.error("注册失败");
          this.loginDialogVisible = false;
        });
    },
    playNext(number) {
      this.songId = this.songId + number;
      this.$http
        .get("/song/" + this.songId)
        .then(response => {
          if (response.data.code === 0) {
            console.log(response.data);
            this.audio.name = response.data.data.title;
            this.audio.artist = response.data.data.author;
          } else {
            this.$message.warning(response.data.message);
          }
        })
        .catch(reason => {
          console.log(reason);
        });
    },
    getSongs() {
      this.$http
        .get("/song/" + this.songId)
        .then(response => {
          if (response.data.code === 0) {
            console.log(response.data);
            this.audio.name = response.data.data.title;
            this.audio.artist = response.data.data.author;
          } else {
            this.$message.warning(response.data.message);
          }
        })
        .catch(reason => {
          console.log(reason);
        });
    },
    openDrawer() {
      this.drawer = true;
      this.$http
        .get("comment/" + 6 + "/" + 1, {
          params: {
            "song.songId": this.songId
          }
        })
        .then(response => {
          console.log(response.data);
          this.commentList = response.data.data.items;
        })
        .catch(reason => {
          console.log(reason);
        });
    }
  }
};
</script>
<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}
.playBar {
  background-color: white;
  box-shadow: 0 0 10px #2c3e50;
  display: inline-flex;
  margin: 0 auto;
  width: 100%;
  height: 100px;
}

.slider-block {
  width: 60%;
  margin: auto;
}
.operation {
  height: 100%;
  width: 300px;
  line-height: 100px;
  font-size: 50px;
  text-indent: 20px;
  text-align: center;
}
.comment {
  background-color: #99a9bf;
  margin: 30px auto;
  width: 85%;
  height: 80px;
  border-radius: 25px;
}
.avatar {
  position: relative;
  transform: translate(0%, -50%);
  margin-bottom: -20px;
}
</style>
